<template>
	<view>
		<u-sticky>
			<view class="bgc-white px-30 py-24">
				<u-search placeholder="请输入店铺名称" v-model="keyword" @search="search" @custom="custom"></u-search>
			</view>
		</u-sticky>
		<view class="guess-section">
			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" :style="{marginTop: index == 0 ? '0' : '30rpx'}" @click="navToDetailPage(item)">
				<view v-if="item.isSave" class="isBalance-style flex items-center">
					<u-icon name="rmb" color="#f1cf21"></u-icon>
					<text class="ml-8">储值</text>
				</view>
				<view class="image-wrapper">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="content-box">
					<view class="title line-1 font-bold">{{item.name}}</view>
					<view class="evaluation-box mt-8">
						<view class="score">{{ item.score || '暂无评' }}</view>
						<view class="sales">
							<text class="ml-12">销量：{{ item.salesVolume }}</text>
						</view>
					</view>
					<view class="delivery flex items-center justify-between mt-8">
						<view>
							<text>起送 ¥{{ item.startPrice }}</text>
							<text class="ml-8">配送 ¥{{ item.deliveryPrice }}</text>
						</view>
					</view>
					<view class="mt-34 flex items-center flex-wrap">
						<view v-for="(item, index) in setEvaluateTemplate(item.evaluateTemplate)" :key="index">
							<view class="mr-12" v-if="index < 3">
								<u-tag :text="item" size="mini" type="warning" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				shopTypeId: undefined,
				keyword: '',
				goodsList: [],
				page: 0,
				loading: false,
				loadMore: true
			}
		},
		computed: {
			...mapState(['schoolInfo']),
			status() {
				if (this.loadMore == false) {
					return "noMore";
				} else if (this.loading) {
					return "loading";
				} else {
					return "more";
				}
			}
		},
		watch:{
			keyword(val){
				if(val == '') {
					this.page = 0;
					this.goodsList = [];
					this.loadMore = true;
					this.getShopInfoUserData();
				}
			}
		},
		onLoad(e) {
			this.shopTypeId = e.id;
			this.getShopInfoUserData();
		},
		onReachBottom() {
			this.getShopInfoUserData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 0;
			this.goodsList = [];
			this.getShopInfoUserData();
		},
		methods: {
			setEvaluateTemplate(str){
				let arr = [];
				if(str == null) {
					arr = ['暂无评价']
				}else{
					arr = str.split(',');
				}
				return arr
			},
			// 搜索事件
			search(){
				this.page = 0;
				this.goodsList = [];
				this.loadMore = true;
				this.getShopInfoUserData();
			},
			getShopInfoUserData() {
				if (this.loading || !this.loadMore) {
					return false;
				} else {
					this.loading = true;
					this.page += 1;
					this.$u.api.getShopInfoUser({
							// schoolId: this.schoolInfo.id,
							name: this.keyword,
							shopTypeId: this.shopTypeId,
							page: this.page,
							limit: 10,
						}).then(res => {
							const {
								dataList,
								total
							} = res;
							this.goodsList = this.goodsList.concat(dataList);
							if (total <= this.goodsList.length) this.loadMore = false;
							this.loading = false;
						})
						.catch(() => {
							this.loading = false;
							this.page -= 1;
						});
				}
			},
			//详情页
			navToDetailPage(item) {
				uni.navigateTo({
					url: `/pages/store/index?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;



		.guess-item {
			display: flex;
			width: 100%;
			padding: 24rpx;
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 16rpx;
			position: relative;

			&:nth-child(2n+1) {
				// margin-right: 4%;
			}

			.isBalance-style {
				position: absolute;
				top: 0;
				right: 0;
				border-top-right-radius: 16rpx;
				border-bottom-left-radius: 8rpx;
				background-color: rgb(62, 62, 62);
				color: #f1cf21;
				padding: 4rpx 16rpx;
				font-size: 24rpx;
				font-weight: 200;
			}
		}

		.image-wrapper {
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.content-box {
			margin-left: 24rpx;
			flex: 1;

			.title {
				font-size: 30rpx;
				width: 380rpx;
				color: $font-color-dark;
			}

			.evaluation-box {
				display: flex;
				align-items: flex-end;

				.score {
					color: #e29c51;
					font-size: 28rpx;
					font-weight: bold;

					&::after {
						content: '分';
						font-size: 24rpx;
					}
				}

				.sales {
					font-size: 24rpx;
					color: #999;
				}
			}

			.delivery {
				font-size: 24rpx;
				color: #999;
			}
		}

	}
</style>